﻿<template>
    <div id="leftnav">
        <ul>
            <router-link :to="item.path" v-for="(item,index) in navData" :key="item.id" >
<!--                第一种-->
                <!--<li :class="{'active':item.isActive}" @click="bs(item,index)">
                    {{item.name}}
                </li>-->
<!--                第二种-->
                <li :class="{'active':changeNum===index}" @click="bs(item,index)">
                    {{item.name}}
                </li>
            </router-link>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "leftNav",
        data(){
            return{
                navData: [
                    {id:1,path:'/home/student',name:'学生管理',isActive:true},
                    {id:2,path:'/home/student',name:'班级1管理',isActive:false},
                    {id:3,path:'/home/student',name:'班级2管理',isActive:false},
                    {id:4,path:'/home/student',name:'班级3管理',isActive:false},
                    {id:5,path:'/home/student',name:'班级4管理',isActive:false},

                ],
                changeNum:0
            }
        },
        methods:{
            bs(data,index){
                //第一种
                /*this.navData.forEach(item=>{
                    if (item.id===data.id){
                        item.isActive=true
                    }else{
                        item.isActive=false
                    }
                })*/

                this.changeNum=index
            }
        }
    }
</script>

<style lang="less" scoped>
    #leftnav{
        float: left;
        width: 19%;
        border: 1px solid sandybrown;
        ul{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
            width: 100%;
            padding: 10px 0;
            text-align: center;
            border: 1px solid sandybrown;
            color: black;
        }
        .active{
            background-color: #2aabd2;
            color: white;
        }
    }
</style>